<h1>Vacations</h1>
{{#each vacations}}
    <div class="vacation">
        <h3><a href="/vacation/{{slug}}">{{name}}</a></h3>
        <p>{{description}}</p>
        {{#if inSeason}}
            <span class="price">{{price}}</span> 
			<a href="/cart/add?sku={{sku}}" data-action="cart-add" data-sku="{{sku}}" class="btn btn-default">Add to cart</a>
        {{else}}
            <span class="outOfSeason">We're sorry, this vacation is currently 
            not in season.
            {{! The "notify me when this vacation is in season" 
                page will be our next task. }}
            <a href="/notify-me-when-in-season?sku={{sku}}">Notify me when 
            this vacation is in season.</a>
        {{/if}}
    </div>
{{/each}}

<hr>

<p>Currency:
    <a href="/set-currency/USD" class="currency {{currencyUSD}}">USD</a> |
    <a href="/set-currency/GBP" class="currency {{currencyGBP}}">GBP</a> |
    <a href="/set-currency/BTC" class="currency {{currencyBTC}}">BTC</a>
</p>

{{#section 'jquery'}}
	<script>
		$(document).ready(function() {
			$('[data-action="cart-add"]').on('click', function() {
				var $this = $(this);
				$.post($this.attr('href'), { sku: $this.data('sku'), guests: 1 })
					.done(function() {
						// it would probably be bettert for cart.addItem to actually handle
						// the AJAX call; a refactoring for another day!
						cart.addItem($this.data('sku'));
						$('<span class="badge">Vacation added!</span>')
							.hide()
							.insertAfter($this)
							.fadeIn();
					})
					.fail(function() {
						$('<span class="badge">Error!  Please try again.</span>')
							.hide()
							.insertAfter($this)
							.fadeIn();
					});
				return false;
			});
		});
	</script>
{{/section}}
